<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb>
        <el-breadcrumb-item>
          <i class="el-icon-tickets">仓库详情</i>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="cantainer">
        <div class="handle-box">
          <el-button type="primary" @click="dialogFormVisible = true" class="handle-del mr10">添加</el-button>
          <el-select v-model="forwardId" placeholder="请选择货代" style="width: 180px" @change="getChannel">
            <el-option
              v-for="item in freightForwardList"
              :key="item.forwardId"
              :label="item.name"
              :value="item.forwardId"
            >
            </el-option>
          </el-select>
          <el-select v-model="channelId" placeholder="请选择渠道" style="width: 180px">
            <el-option
              v-for="item in channelList"
              :key="item.channelId"
              :label="item.channelName"
              :value="item.channelId">
            </el-option>
          </el-select>
          <el-input v-model="areaName" placeholder="请输入仓库名称" style="width: 180px"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="vueTable">搜索</el-button>
          <el-button type="primary" @click="showUpload">上传<i class="el-icon-upload el-icon--right"></i></el-button>
          <el-button type="danger" @click="batchDelete" class="handle-del mr10">批量删除</el-button>
        </div>
        <el-table
          :data="list.slice(0,pagesize)"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading="addLoading"
          @selection-change="handleSelectionChange"
          fit
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="仓库名称"
            min-width="50px"
            prop="areaName">
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column
            v-for="arr in weights"
            :key="arr"
            :label="`${arr}`"
            :prop="arr"
            sortable
            min-width="50px"
            :formatter="formatter"
          >
          </el-table-column>
          <el-table-column
            label="上传时间"
            min-width="50px"
            prop="time">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="clickPrice(scope.$index, scope.row)"
              >价格波动图
              </el-button>
              <el-button
                size="mini"
                @click="clickHistory(scope.$index, scope.row)"
              >历史数据
              </el-button>
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="clickDel(scope.$index,scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="el-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="价格波动图" :visible.sync="priceChangeVisible" @close="closePrice" center>
      <div class="chart-container">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="handlePriceChange">搜索</el-button>
      </div>

      <template>
        <div id="app" class="chart-container">
          <ECharts :options="chartOptions" autoresize></ECharts>
        </div>
      </template>
    </el-dialog>
    <!--历史价格弹出框-->
    <el-dialog title="历史价格" :visible.sync="historyVisible" width="60%" @close="closeHistory" center>
      <div class="chart-container">
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="handleHistory">搜索</el-button>
      </div>


      <el-table
        :data="historyList.slice(0,historyPageSize)"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="addLoading"
        fit
      >
        <el-table-column
          label="仓库名称"
          min-width="50px"
          prop="areaName">
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column
          v-for="arr in weights"
          :key="arr"
          :label="`${arr}`"
          :prop="arr"
          sortable
          min-width="50px"
          :formatter="formatter"
        >
        </el-table-column>
        <el-table-column
          label="上传时间"
          min-width="50px"
          prop="time">
        </el-table-column>
      </el-table>
      <el-pagination
        class="el-pagination"
        @size-change="historySizeChange"
        @current-change="historyCurrentChange"
        :current-page="historyCurrentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="historyPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="historyTotalCount"
        background
      >
      </el-pagination>
    </el-dialog>

    <!--编辑弹出框-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" width="20%" center>
      <el-form :model="editForm" label-width="auto" ref="addForm">
        <el-form-item label="仓库名称">
          <el-input v-model="editForm.areaName"></el-input>
        </el-form-item>
        <el-form-item v-for="weight in weights" :key="weight" :label="`${weight}`">
          <el-input v-model="editForm.weights[weight]" :placeholder="`请输入${weight}的价格`"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加弹出框 -->
    <el-dialog title="添加仓库信息" :visible.sync="dialogFormVisible" width="20%" @close="closeAdd" center>
      <el-form :model="form" label-width="50px">
        <el-form-item label="货代信息" prop="region" label-width="80px">
          <el-select v-model="forwardId" placeholder="请选择货代" style="width: 180px" @change="getChannel">
            <el-option
              v-for="item in freightForwardList"
              :key="item.forwardId"
              :label="item.name"
              :value="item.forwardId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道信息" prop="region" label-width="80px">
          <el-select v-model="addChannelId" placeholder="请选择渠道" style="width: 180px" @change="getWeight">
            <el-option
              v-for="item in channelList"
              :key="item.channelId"
              :label="item.channelName"
              :value="item.channelId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库名称" label-width="80px">
          <el-input v-model="form.name" placeholder="请输入仓库名称" style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item label="重量表名" label-width="80px">
          <el-input v-model="form.weight" placeholder="输入格式:21KG+,75KG+,101KG+" :disabled="disabled"
                    style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item label="价格" label-width="80px">
          <el-input v-model="form.price" placeholder="输入格式:55,50,45" style="width: 180px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAdd">取 消</el-button>
        <el-button type="primary" @click="add" :loading="addLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!--上传弹出框-->
    <el-dialog title="上传" :visible.sync="uploadVisible" width="30%" center @close="closeUpload">
      <el-form :model="fileData" label-width="auto" ref="addForm">
        <el-form-item label="开始标识">
          <el-input v-model="fileData.startName" placeholder="FBA仓库" style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item label="行结束位移">
          <el-input v-model="fileData.lineEnd" placeholder="3" style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item label="货代名称">
          <el-select v-model="fileData.forwardId" placeholder="请选择货代" style="width: 180px">
            <el-option
              v-for="item in freightForwardList"
              :key="item.forwardId"
              :label="item.name"
              :value="item.forwardId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="string"
            drag
            :multiple="false"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="handleChange"
            :on-remove="handleRemove"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUpload">取 消</el-button>
        <el-button type="primary" :loading="addLoading" @click="uploadSubmit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from "../../../util/axios_config";
import {getChannelData, getFreightForwardData} from "../../../util/common";
import {formatTimestamp} from "../../../util/utils.js";
import ECharts from 'vue-echarts';
import * as echarts from 'echarts';

export default {
  components: {
    ECharts
  },
  data() {
    return {
      list: [], //数据存储
      historyList: [],
      fileList: [],//文件存储
      dialogFormVisible: false,   //添加弹出框
      ListSearch: "",  //搜索
      editFormVisible: false,  //编辑器弹出框
      historyVisible: false,  //历史数据弹出框
      uploadVisible: false,//上传弹出框
      priceChangeVisible: false,//价格趋势图
      form: {    //需要添加的字段
        name: "",
        weight: "",
        price: ""
      },
      editForm: {   //编辑需要的字段
        row: {},
        areaName: "",
        weights: {}
      },
      fileData: {   //文件上传需要的字段
        startName: "",
        lineEnd: "",
        forwardId: ""
      },
      addLoading: false,
      currentPage: 1, //初始页
      pagesize: 5,   //	每页的数据,
      historyCurrentPage: 1, //初始页
      historyPageSize: 5,   //	每页的数据
      totalCount: 0,
      historyTotalCount: 0,
      weights: [], //列名
      channelList: [],//渠道信息
      freightForwardList: [],//货代信息
      forwardId: "",
      channelId: "",
      areaName: "",
      addChannelId: "",
      disabled: false,
      delList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [],
      history: {//查询历史记录需要的字段
        row: {},
      },
      price: {//查询价格需要的字段
      },
      chartOptions: {
        legend: {
          // Try 'horizontal'
          orient: 'vertical',
          right: 20,
          top: 'center',
          data: []
        },
        xAxis: {
          data: []
          // data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          // {
          //   name: '75KG',
          //   data: [10, 22, 28, 43, 49],
          //   type: 'line',
          // },
          // {
          //   name: '169KG',
          //   data: [11, 25, 29, 30.5, 10],
          //   type: 'line',
          // }
        ], // 高亮样式。
        emphasis: {
          itemStyle: {
            // 高亮时点的颜色。
            color: 'blue'
          },
          label: {
            show: true,
            // 高亮时标签的文字。
            formatter: function (params) {
              return params.value; // 显示数据值
            }
          }
        }
      }
    }
  },
  created() {
    this.addLoading = true;
    //获取货代信息
    getFreightForwardData().then(data => {
      this.freightForwardList = data;
      this.addLoading = false;
    }).catch(error => {
      this.addLoading = true;
      this.$message.error(error.message);
    });
  },
  methods: {
    // 改变条数
    handleSizeChange: function (size) {
      this.pagesize = size;
      this.currentPage = 1; // 重置到第一页
      this.vueTable();
    },
    //改变当前页
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.vueTable();
    },
    // 改变历史条数
    historySizeChange: function (size) {
      this.historyPageSize = size;
      this.historyCurrentPage = 1; // 重置到第一页
      this.handleHistory();
    },
    //改变历史当前页
    historyCurrentChange: function (currentPage) {
      this.historyCurrentPage = currentPage;
      this.handleHistory();
    },
    // 获取渠道详情列表
    vueTable() {
      this.addLoading = true;
      let HandleEdit = {
        areaName: this.areaName,
        channelId: this.channelId,
        page: this.currentPage,
        limit: this.pagesize
      }
        axios.post('/channelDetail/select/',HandleEdit).then(res => {
        if (res.data) {
          var data = {};
          //转为json
          if (typeof data === 'string') {
            data = JSON.parse(res.data);
          } else {
            data = res.data;
          }

          if (data.errCode === 10000) {
            //处理列表数据
            this.handleListData(data)
            //处理
          } else {
            this.$message.error('获取菜单数据失败');
          }
        } else {
          this.$message.error('获取菜单数据失败');
        }
        this.addLoading = false;
      })
    },
    // 显示编辑弹出框
    handleEdit(index, row) {
      this.editFormVisible = true;
      this.editForm = {
        row: row,
        areaName: row.areaName,
        weights: {}
      };
      // 复制公斤数和公斤输入框的数据
      this.weights.forEach(weight => {
        this.$set(this.editForm.weights, weight, row[weight] || '');
      })
    },
    //显示上传框
    showUpload() {
      this.uploadVisible = true;
    },
    //点击价格波动
    clickPrice(index, row) {
      this.value1 = [new Date(new Date().setDate(new Date().getDate() - 1)), new Date()];
      this.priceChangeVisible = true;
      this.price = row;
      this.handlePriceChange()
    },
    //点击历史记录
    clickHistory(index, row) {
      this.value1 = [new Date(new Date().setDate(new Date().getDate() - 1)), new Date()];
      this.history = row;
      this.historyVisible = true;
      this.handleHistory();
    },
    // 显示历史数据弹出框
    handleHistory() {
      var row = this.history;
      //开始时间
      const date = new Date(this.value1[0]);
      const startTime = date.getTime();
      //结束时间
      const date1 = new Date(this.value1[1]);
      const endTime = date1.getTime();
      this.addLoading = true;
      axios.get('/channelDetail/selectHistory/' + row.detailId + '/' + startTime + '/' + endTime + '/' + this.historyCurrentPage + '/' + this.historyPageSize).then(res => {
        this.historyVisible = true;
        if (res.data) {
          var data = {};
          //转为json
          if (typeof data === 'string') {
            data = JSON.parse(res.data);
          } else {
            data = res.data;
          }
          if (data.errCode === 10000) {
            var historyList = [];
            let index = 0;
            if (this.historyCurrentPage <= 1) {
              //总数
              this.historyTotalCount = data.content.totalCount / this.weights.length;
            }

            let attr = data.content.historyAttr;
            for (const contentKey in attr) {
              //保存总条数
              //处理列表数据
              historyList[index] = {};
              historyList[index]["areaName"] = row.areaName;
              historyList[index]["time"] = formatTimestamp(contentKey);
              attr[contentKey].forEach(history => {
                historyList[index][history.weightName] = history.price;
              })
              index++;
            }
            // 对 historyList 按时间倒序排序
            historyList.sort((a, b) => {
              const timeA = new Date(a.time).getTime();
              const timeB = new Date(b.time).getTime();
              return timeB - timeA;
            });
            this.historyList = historyList;
            //处理
          } else {
            this.$message.error(data.errMsg);
          }
        } else {
          this.$message.error('获取历史数据失败');
        }
        this.addLoading = false;
      })
    },
    //处理价格波动数据
    handlePriceChange() {
      var row = this.price;
      //开始时间
      const date = new Date(this.value1[0]);
      const startTime = date.getTime();
      //结束时间
      const date1 = new Date(this.value1[1]);
      const endTime = date1.getTime();
      axios.get('/channelDetail/selectHistoryPrice/' + row.detailId + '/' + startTime + '/' + endTime).then(res => {
        if (res.data) {
          var data = {};
          //转为json
          if (typeof data === 'string') {
            data = JSON.parse(res.data);
          } else {
            data = res.data;
          }
          if (data.errCode === 10000) {
            let attr = data.content.historyAttr;
            if (attr === undefined) {
              this.$message.error('未查询到数据');
              return;
            }
            for (const contentKey in attr) {
              //横轴名称
              this.chartOptions.xAxis.data.push(formatTimestamp(contentKey))
              attr[contentKey].forEach(history => {
                if (history.weightName.indexOf("KG") !== -1) {
                  let i = 0;
                  let price = history.price
                  this.chartOptions.series.forEach(item => {
                    if (item.name === history.weightName) {
                      item.data.push(price);
                      i++;
                    }
                  })
                  //为0说明没有该数组，则添加该数组
                  if (i === 0) {
                    this.chartOptions.series.push({
                      name: history.weightName,
                      data: [price],
                      type: 'line',
                    })
                  }
                  //判断重量名称是否在legend中，如果没有则添加
                  if (!this.chartOptions.legend.data.includes(history.weightName)) {
                    this.chartOptions.legend.data.push(history.weightName);
                  }
                }
              })
            }
            //循环serices数组，补充该数组中data的长度，补充到最大长度，数据往前面添加0
            for (let i = 0; i < this.chartOptions.series.length; i++) {
              let series = this.chartOptions.series[i];
              while (series.data.length < this.chartOptions.xAxis.data.length) {
                series.data.unshift(0);
              }
            }
            console.log("chartOptions", this.chartOptions)
            //处理
          } else {
            this.$message.error(data.errMsg);
          }
        } else {
          this.$message.error('获取数据失败');
        }
        this.addLoading = false;
      })
    },
    // 处理列表数据
    handleListData(data) {
      // 存入基础数据
      let ListArray = []
      let weights = [];

      for (let key in data.content) {
        if (key === "totalCount") {
          if (this.currentPage <= 1) {
            this.totalCount = data.content.totalCount;
          }
          continue;
        }
        // 处理 details 数组
        if (data.content[key].details) {
          data.content[key].details.forEach(detail => {
            data.content[key][detail.weightName.toString()] = detail.price;
            data.content[key]["time"] = formatTimestamp(detail.time);
             if(!weights.includes(detail.weightName.toString())){
               weights.push(detail.weightName.toString())
             }
          });
        }
        //导入数据
        ListArray.push(data.content[key]);
      }
      //保存列数据
      //对weights从小到大排序
      weights.sort((a, b) => {
        // 提取数字部分
        const numA = parseInt(a.match(/\d+/)[0], 10);
        const numB = parseInt(b.match(/\d+/)[0], 10);

        // 比较数字部分
        return numA - numB;
      });
      this.weights = weights;
      this.list = ListArray;
    },
    // 编辑
    editSubmit(row) {
      if (!this.editForm.areaName || !this.editForm.weights) {
        this.$messageerror('内容不能为空');
      } else {
        let arr = [];
        //处理重量
        //获取价格id
        this.editForm.row.details.forEach(value => {
          arr.push({
            warehouseId: value.warehouseId,
            price: this.editForm.weights[value.weightName.toString()],
            weight: value.weight,
            weightName: value.weightName,
          })
        })
        let HandleEdit = {
          detailId: this.editForm.row.detailId,
          areaName: this.editForm.areaName,
          channelId: this.channelId,
          warehousePrice: arr,
        }
        axios.put("/channelDetail/update", HandleEdit).then(res => {
          this.addLoading = false;
          this.editFormVisible = false;
          if (res.data) {
            var data = {};
            if (typeof res.data === 'string') {
              data = JSON.parse(res.data);
            } else {
              data = res.data;
            }
            if (data.errCode === 10000) {
              this.$message.success('添加成功');
            } else {
              this.$message.error(data.errMsg);
            }
          }
          this.vueTable();
        })

      }

    },
    //点击删除
    clickDel(index, row) {
      this.delList.push(row.detailId);
      this.deleteList();
    },
    // 删除
    deleteList() {
      this.$confirm('此操作将永久删除该货代及渠道数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const uniqueArray = this.delList.filter((item, index) => this.delList.indexOf(item) === index);
        let HandleDel = {
          detailIdAttr: uniqueArray,
        }
        axios.post("/channelDetail/del", HandleDel).then(res => {
          if (res.data) {
            var data = {};
            if (typeof res.data === 'string') {
              data = JSON.parse(res.data);
            } else {
              data = res.data;
            }
            if (data.errCode === 10000) {
              this.$message.success('删除成功');
              this.vueTable();
              this.delList = [];
            } else {
              this.$message.error(data.errMsg);
            }
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 添加数据
    add() {
      if (!this.form.name || !this.form.weight || !this.form.price || !this.addChannelId) {
        this.$message.error('内容不能为空');
      } else {
        this.dialogFormVisible = true;
        let handleAddClick = {
          areaName: this.form.name,
          weight: this.form.weight,
          price: this.form.price,
          channelId: this.addChannelId,
        }
        axios.post("channelDetail/add", handleAddClick).then(res => {
          if (res.data) {

            var data = {};
            if (typeof res.data === 'string') {
              data = JSON.parse(res.data);
            } else {
              data = res.data;
            }
            if (data.errCode === 10000) {
              this.$message.success('添加成功');
            } else {
              this.$message.error(data.errMsg);
            }
          }
          // 恢复初始状态
          this.form = {};
          this.dialogFormVisible = false;
          this.addLoading = false;
          this.vueTable();
        })

      }
    },
    //获取渠道
    getChannel() {
      if (!this.forwardId) {
        this.$message.error("请先选择货代");
        return;
      }
      //获取渠道数据
      getChannelData(this.forwardId, 1, 500).then(data => {
        this.channelList = data['list'];
      }).catch(error => {
        this.$message.error(error.message);
      });
    },
    //获取重量
    getWeight() {
      this.addLoading = true;
      axios.get("channelDetail/selectWeight/" + this.addChannelId).then(res => {
        if (res.data) {

          var data = {};
          if (typeof res.data === 'string') {
            data = JSON.parse(res.data);
          } else {
            data = res.data;
          }
          if (data.errCode === 10000) {
            this.addLoading = false;
            this.form.weight = data.content;
            this.disabled = true;
          } else {
            this.$message.error(data.errMsg);
          }
        }
      })
    },
    formatter(row, column, cellValue) {
      return row[column.property];
    },
    //关闭添加表单
    closeAdd() {
      this.dialogFormVisible = false;
      this.form = {    //需要添加的字段
        name: "",
        weight: "",
        price: ""
      };
      this.disabled = false;
      this.addChannelId = "";
    },
    //关闭历史记录
    closeHistory() {
      this.dialogHistoryVisible = false;
      this.historyList = [];
      this.historyCurrentPage = 1;
      this.historyPageSize = 5;
    },
    //关闭价格
    closePrice() {
      this.priceChangeVisible = false;
      this.chartOptions.xAxis.data = [];
      this.chartOptions.series.forEach(series => {
        series.data = [];
      });
      this.chartOptions.legend.data = [];
      console.log("查看数据", this.chartOptions)
    }
    ,
    //批量删除
    batchDelete() {
      if (this.delList.length <= 0) {
        this.$message.error('请选择要删除的数据');
      } else {
        this.deleteList()
      }
    },
    //多选框
    handleSelectionChange(val) {
      this.delList = val.map(item => item.detailId);
    },
    uploadSubmit() {
      if (!this.fileData.forwardId || !this.fileList || !this.fileData.startName || !this.fileData.lineEnd) {
        this.$message.error('内容不能为空');
        return;
      }
      this.addLoading = true;
      let formData = new FormData();
      this.fileList.forEach(item => {
        formData.append("file", item.raw);
      })
      formData.append("forwardId", this.fileData.forwardId);
      formData.append("startName", this.fileData.startName);
      formData.append("lineEnd", this.fileData.lineEnd);
      axios.post("/excel/input", formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8'
        }
      })
        .then(res => {
          this.addLoading = false;
          this.uploadVisible = false;
          if (res.data) {
            var data = {};
            if (typeof res.data === 'string') {
              data = JSON.parse(res.data);
            } else {
              data = res.data;
            }
            if (data.errCode === 10000) {
              this.$message.success('导入成功');
              this.$refs['upload'].clearFiles();
            } else {
              this.$message.error(data.errMsg);
            }
          }
        })
    },
    //文件改变
    handleChange(file, fileList) {
      this.fileList = fileList;  // 更新 fileList
    },
    handleRemove(file, fileList) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
      this.$message.success('删除成功！');
    },
    closeUpload() {
      this.uploadVisible = false;
      this.$refs['upload'].clearFiles();
      this.fileList = [];
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.search-input {
  width: 200px;
  margin-left: 50px;
}

.el-table__body-wrapper {
  height: 500px;
}

.crumbs {
  margin-bottom: 20px;
}

.el-pagination {
  text-align: center;
}

#app {
  height: 400px;
}

.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
